/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  Platform,
  Dimensions,
} from 'react-native';

import Request from '../Common/Request';
import Config from '../Common/Config';

const {width, height} = Dimensions.get('window')

export default class Login extends Component {
    constructor(props) {
        super(props)

        this.state = {
            phoneNumber: '',
            isGotVerifyCode: false,
            verifyCode: '',
            countDownTitle: '获取验证码',
            countDownNumber: -1,
            startCountDown: false,
            isUploadingAvatar: false,
            progress: 0,
        }

        this._getCode = this._getCode.bind(this)
        this._register = this._register.bind(this)
    }

    componentWillUnmount() {
        this.timer && clearInterval(this.timer)
    }

    _getCode() {
        let phoneNumber = this.state.phoneNumber

        if (!phoneNumber) {
            alert('手机号不能为空')
            return
        }

        if (!this.state.startCountDown) {
            this.setState({
                startCountDown: true,
                countDownNumber: 60,
            })

            this.timer = setInterval(() => {
                if (this.state.countDownNumber === 0) {
                    this.setState({
                        countDownTitle: '重新获取',
                        startCountDown: false,
                    })

                    this.setState({
                        countDownNumber: this.state.countDownNumber - 1,
                    })

                    clearInterval(this.timer)
                    return
                }

                this.setState({
                    countDownNumber: this.state.countDownNumber - 1,
                })
            }, 1000);
        }

        if(!this.state.isGotVerifyCode) {
            // 获取验证码
            let url = Config.api.base + Config.api.code
            let body = {
                phoneNumber: phoneNumber
            }

            Request.post(Config.api.base + Config.api.code, {
                phoneNumber: phoneNumber
            })
            .then((responseData) => {
                if (responseData && responseData.success) {
                    this.setState({
                        isGotVerifyCode: true,
                    })
                } else {
                    console.log('没有有效的验证码');
                    this.setState({
                        isGotVerifyCode: false,
                    })
                }
            })
            .catch((error) => {
                console.log(error);
                this.setState({
                    isGotVerifyCode: false,
                })
            })
        }
    }

    _register() {
        let phoneNumber = this.state.phoneNumber
        let verifyCode = this.state.verifyCode

        if (!phoneNumber && ! verifyCode) {
            alert('手机号或验证码不能为空')
            return
        }

        if(this.state.isGotVerifyCode) {
            // 获取验证码

            Request.post(Config.api.base + Config.api.verify, {
                phoneNumber: phoneNumber,
                verifyCode: verifyCode,
            })
            .then((responseData) => {
                if (responseData && responseData.success) {
                    console.log('验证成功');
                    this.props.saveAccount(responseData)
                } else {
                    console.log('验证失败');

                }
            })
            .catch((error) => {
                console.log(error);

            })
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.registerBox}>
                    <Text style={styles.loginTitle}>
                        快速注册
                    </Text>
                    <View style={styles.phoneNumberBox}>
                        <View style={styles.phoneNumberInput}>
                            <TextInput
                                style={styles.phoneNumberText}
                                autoCorrect={false}
                                autoCapitalize="none"
                                keyboardType="number-pad"
                                placeholder="请输入手机号"
                                onChangeText={(text) => {
                                    this.setState({
                                        phoneNumber: text
                                    })
                                }}
                            />
                        </View>

                        <View style={styles.countDownBox}>
                            {this.state.countDownNumber === -1 ?
                                <Text style={styles.countDownText} onPress={this._getCode}>
                                    {this.state.countDownTitle}

                                </Text>
                                :
                                <Text style={styles.countDownText} onPress={this._getCode}>
                                    剩余{this.state.countDownNumber}秒
                                </Text>
                            }
                        </View>

                    </View>

                    {this.state.isGotVerifyCode ?
                        <TextInput
                            style={styles.verifyCode}
                            autoCorrect={false}
                            autoCapitalize="none"
                            keyboardType="number-pad"
                            placeholder="请输入验证码"
                            onChangeText={(text) => {
                                this.setState({
                                    verifyCode: text
                                })
                            }}
                        />
                        : null
                    }
                    <View style={styles.verifyBtnBox}>
                        <Text style={styles.registerBtn} onPress={this._register}>
                            登录
                        </Text>
                    </View>

                </View>

            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      backgroundColor: '#F5FCFF',
    },

    registerBox: {
        width: width
    },
    loginTitle: {
        textAlign: 'center',
        fontSize: 20,
        fontWeight: 'bold',
        color: '#000',
        marginTop: 40,
    },

    phoneNumberBox: {
        marginTop: 20,
        marginLeft: 10,
        width: width - 20,
        height: 50,
        backgroundColor: 'white',
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 4,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    phoneNumberInput: {
        flex: 1,
        marginRight: 10,
        height: 50,
    },
    phoneNumberText: {
        height: 50,
        fontSize: 16,
    },
    countDownBox: {
        width: 100,
        backgroundColor: '#ee7f5d',
        justifyContent: 'center',
        alignItems: 'center',
    },
    countDownText: {
        fontSize: 16,
        color: 'white',
    },

    verifyCode: {
        marginTop: 10,
        marginLeft: 10,
        width: width - 20,
        height: 50,
        backgroundColor: 'white',
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 4,
    },
    verifyBtnBox: {
        marginTop: 10,
        marginLeft: 10,
        width: width - 20,
        height: 50,
        borderWidth: 1,
        borderColor: 'gray',
        borderRadius: 4,
        backgroundColor: '#ccc',
        justifyContent: 'center',
    },
    registerBtn: {
        fontSize: 18,
        textAlign: 'center',
        color: 'red',
    },

});
